<template>
  <el-drawer
    v-loading="loading"
    v-model="dialogVisible"
    title="账单详情"
    width="600px"
    class="detail-draw"
  >
    <el-descriptions
      title=""
      :column="2"
      class="detail-information"
    >
      <el-descriptions-item label="用户名">{{
        detailData.userName
      }}</el-descriptions-item>
      <el-descriptions-item label="房间号">{{
        detailData.houseNum
      }}</el-descriptions-item>
      <el-descriptions-item label="账单费用"
        >{{ detailData.billFee }}元</el-descriptions-item
      >
      <el-descriptions-item label="账单时间">
        {{ detailData.billDate }}
      </el-descriptions-item>
    </el-descriptions>
    <div class="detail-collapse">
      <el-collapse v-model="level1Active">
        <el-collapse-item name="1">
          <template #title>
            <div class="detail-collapse-title">
              <span>电费</span>
              <span>{{ detailData.elecFee }}元</span>
            </div>
          </template>
          <el-collapse
            v-if="detailData.elecEquipBill"
            v-model="eleActive"
          >
            <el-collapse-item
              v-for="(item, index) in detailData.elecEquipBill"
              :key="index"
              :name="`ele${index}`"
            >
              <template #title>
                <div class="detail-collapse-title">
                  <span class="show-icon">{{ item.name }}</span>
                  <span>{{ item.fee }}元</span>
                </div>
              </template>
              <ul class="detail-fee-list">
                <li>
                  <span>峰</span>
                  <span>{{ item.monthElecPeak }}度</span>
                  <span>{{ item.monthElecPeakFee }}元</span>
                </li>
                <li>
                  <span>平</span>
                  <span>{{ item.monthElecFlat }}度</span>
                  <span>{{ item.monthElecFlatFee }}元</span>
                </li>
                <li>
                  <span>谷</span>
                  <span>{{ item.monthElecValley }}度</span>
                  <span>{{ item.monthElecValleyFee }}元</span>
                </li>
                <li>
                  <span>深谷</span>
                  <span>{{ item.monthElecRavine }}度</span>
                  <span>{{ item.monthElecRavineFee }}元</span>
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template #title>
            <div class="detail-collapse-title">
              <span>水费</span>
              <span>{{ detailData.waterFee }}元</span>
            </div>
          </template>
          <el-collapse
            v-if="detailData.waterEquipBill"
            v-model="eleActive"
          >
            <ul class="detail-collapse-list">
              <li
                v-for="(item, index) in detailData.waterEquipBill"
                :key="index"
                class="el-collapse-item__header"
              >
                <div class="detail-collapse-title">
                  <span class="show-icon">{{ item.name }}</span>
                  <span>{{ item.fee }}元</span>
                </div>
              </li>
            </ul>
          </el-collapse>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-drawer>
</template>
<script lang="ts" setup>
/**
 * 账单详情
 * 一个房间-多个设备情况（暂时没用）
 */
import { ref } from "vue";
import { getBillDetail } from "@/api/settle";

const dialogVisible = ref(false);
const loading = ref(false);
const billId = ref("");
const detailData = ref({});
const level1Active = ref([]);
const eleActive = ref([]);

const openHandle = (id: string) => {
  dialogVisible.value = true;
  if (billId.value !== id) {
    billId.value = id;
    getData();
  }
};

const getData = () => {
  loading.value = true;
  getBillDetail(billId.value)
    .then((res) => {
      detailData.value = res.data;
      loading.value = false;
    })
    .catch((err: any) => {
      loading.value = false;
    });
};

defineExpose({ dialogVisible, openHandle });
</script>
<style lang="scss" scoped>
$ligntColor: #838d9a;
$textColor: #303030;
$border: 1px solid #f0f0f0;
.detail-information {
  :deep(.el-descriptions__body) {
    .el-descriptions__label {
      color: $ligntColor;
    }
    .el-descriptions__content {
      font-weight: bold;
      font-size: 14px;
    }
  }
}
.detail-collapse {
  margin-top: 8px;
  :deep(.el-collapse) {
    border: none;
    .el-collapse-item__header {
      padding-right: 16px;
      border-bottom: $border;
    }
    .el-collapse-item__wrap {
      padding: 0 16px;
      border: none;
      background: #fafbfc;
      .el-collapse-item__header {
        padding-right: 0;
        background-color: transparent;
      }
      .el-collapse-item__wrap {
        padding: 0;
      }
    }
  }

  .el-collapse-item {
    .el-collapse-item {
      margin-top: 0;
    }
  }
  .el-collapse-item + .el-collapse-item {
    margin-top: 16px;
  }
  .detail-collapse-title {
    display: flex;
    flex: 1;
    padding-right: 20px;
    color: $textColor;
    font-weight: bold;
    span:nth-child(1) {
      flex: 1;
      text-align: left;
      color: $ligntColor;
      font-weight: 400;
    }
    .show-icon:before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      margin-right: 6px;
      border: 1px solid $mainColor;
      border-radius: 50%;
    }
  }

  .el-collapse-item .el-collapse-item.is-active {
    .detail-collapse-title {
      .show-icon:before {
        background-color: $mainColor;
      }
    }
  }

  .detail-fee-list {
    padding: 0;
    margin: 0;
    li {
      display: flex;
      justify-content: space-between;
      height: 32px;
      line-height: 32px;
      margin-top: 4px;
      background: #f5f7fa;
      color: $textColor;
      span {
        width: 30%;
        text-align: center;
        &:first-child {
          text-align: left;
        }
        &:last-child {
          text-align: right;
        }
      }
    }
  }
}
</style>
